<template>
  <view>
    <u-navbar title="地址管理" title-size="36"></u-navbar>
    <u-gap height="20rpx" bg-color="#f7f7f7"></u-gap>
    <view class="view-area">
      <view v-if="!addressList || addressList.length === 0" class="no-data">
        暂无收货地址，请添加
      </view>
      <view v-else class="dis-flex flex-column flex-y-center" style="width: 100%">
        <view style="color: orange; font-size: 26rpx" v-if="isCheck">
          温馨提示：点击下面对应的地址条目，即可选择该地址
        </view>
        <view class="view-item" v-for="(item, index) in addressList" :key="index">
          <view class="view-title">
            <view @click="onCheck(item)" class="title">
              {{ item.name }} &nbsp;&nbsp;&nbsp; {{ item.mobile }}
            </view>
            <u-icon
              @click="onAddress(item)"
              style="margin-right: 20rpx"
              name="/static/mydd_xg.png"
              size="40"
            ></u-icon>
            <u-icon @click="onDelete(item)" name="/static/mddd_sc.png" size="40"></u-icon>
          </view>
          <view @click="onCheck(item)" class="detail dis-flex flex-y-center">
            <view v-if="item.defaultStatus" class="def-icon"> 默认 </view>
            <text>{{ item.detailAddress }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-wapper">
      <view class="submit-btn" @click="onAddress(0)"> +新建收货地址 </view>
    </view>

    <u-popup v-model="show" mode="center" border-radius="20">
      <view class="comfirm-box">
        <view class="com-title">您确认要删除地址吗</view>
        <u-line></u-line>
        <view class="bt-group dis-flex flex-y-around">
          <view class="bt" @click="show = false">暂不删除</view>
          <u-line length="100%" direction="col"></u-line>
          <view class="bt ck" @click="toDelete">确认删除</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      addressList: [],
      isCheck: false,
      checkItem: {}
    }
  },
  onLoad(e) {
    this.isCheck = e.isCheck ? true : false
  },
  onShow() {
    this.init()
  },
  methods: {
    init() {
      this.$u.api.getAddressList().then((res) => {
        this.addressList = res.data
      })
    },
    onAddress(e) {
      if (e != 0) {
        e = JSON.stringify(e)
      }
      uni.navigateTo({
        url: '/other/address-manage-edit/address-manage-edit?address=' + e
      })
    },
    onDelete(e) {
      this.checkItem = e
      this.show = true
    },
    toDelete() {
      this.show = false
      this.$u.get('/app-api/member/address/delete?id=' + this.checkItem.id).then((res) => {
        if (res.code != 0) {
          this.$u.toast(res.msg)
          return
        }
        this.$u.toast('成功')
        this.init()
      })
    },
    onCheck(item) {
      if (!this.isCheck) {
        return
      }
      uni.dialog.confirm('温馨提示', '选择这个收货地址？', () => {
        uni.$emit('manage', item)
        uni.navigateBack()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

.view-area {
  width: 100%;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view-item {
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx;
}

.view-title {
  display: flex;
}

.title {
  flex: 1;
  font-size: 30rpx;
  margin: 10rpx 20rpx;
}

.detail {
  font-size: 28rpx;
  color: #333333;
  margin: 10rpx 20rpx;
}

.def-icon {
  line-height: 36rpx;
  text-align: center;
  width: 56rpx;
  height: 36rpx;
  font-size: 22rpx;
  color: #ffffff;
  background-color: #f54831;
  margin: 10rpx 20rpx;
}

.no-data {
  text-align: center;
  margin: 100rpx;
  color: orange;
  font-size: 30rpx;
}

.comfirm-box {
  width: 600rpx;
  height: 320rpx;
  background: #ffffff;
  border-radius: 20rpx;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

  .com-title {
    height: 204rpx;
    line-height: 204rpx;
    text-align: center;
    font-size: 36rpx;
    color: #333333;
  }

  .bt-group {
    height: 115rpx;
    line-height: 115rpx;
    text-align: center;
    font-size: 32rpx;
    color: #666666;

    .bt {
      width: 50%;
    }
  }

  .ck {
    color: #fa453c;
  }
}
</style>
